@import "../../../style/color.scss";
@import "../../../style/domain.scss";
@import "../../../style/font.scss";
@import "../../../style/mixin.scss";

.video-sys-wrapper {

  .video-sys-container {
    //overflow: hidden;
    display: table;
    width: 100%;

    .video-wrap {
      font-size: 0;
      padding-right: 16px;
      display: table-cell;
      width: 100%;
      vertical-align: top;

      .video {
        width: 100%;
        height: 787px;
        padding: 28px 32px;
        box-sizing: border-box;
        background:
          url("./../../../../images/page/map_b_l1.png") no-repeat top left,
          url("./../../../../images/page/map_b_r1.png") no-repeat top right;
        background-size: 263px 100%;
        position: relative;

        .vehicle-wrap {
          position: absolute;
          top:28px;
          right: 32px;
          bottom: 28px;
          left: 32px;
        }

        #business-video {
          width: 100%;
          height: 100%;
        }

        div {
          border:solid 1px $button-normal-background-color;
        }
      }
    }

    .side-wrap {
      margin-right: 20px;
      vertical-align: top;
  //    float: right;
    //  margin-top: -39px;
      display: table-cell;

      >div {
        width: 402px;
        height: $side-menu-height;
        box-sizing: border-box;
        background: url("./../../../../images/page/right_menu_bg.png") no-repeat;
        background-size: 402px 100%;
       // padding: 30px;
      }

      .video-menu {
        //height: 423px;
        height:100%;
        width: 100%;
      //  border:solid 2px $button-normal-background-color;
        overflow: auto;

        // 兼容ie的滚动条
        scrollbar-face-color:$form-border-color;
        scrollbar-arrow-color: $form-border-color;
        scrollbar-shadow-color:$form-border-color;
        scrollbar-dark-shadow-color:$form-border-color;
        scrollbar-base-color: $form-border-color;
      }

      .sys-menu {
        overflow: auto;
        padding: 28px 20px;
      }

      .submenu:hover {
        cursor: pointer;
        background: rgba(0, 255, 222, 0.5);
        border-radius: 4px;
      }

      .duty-title {
        height: 50px;
        line-height: 50px;
        background: rgba(0, 217, 255, 0.5);
        font-family: $regular-font-family;
        font-size: 22px;
        color: #FFFFFF;
        text-shadow: 0 0 4px rgba(255,255,255,0.50);
        padding-left: 18px;
      }

      .duty-item {
        margin:0 12px;
        height: 50px;
        line-height: 50px;
        padding-left: 8px;
        font-family: $regular-font-family;
        font-size: 20px;
        color: #FFFFFF;
        letter-spacing: 1px;
        text-shadow: 0 0 4px rgba(255,255,255,0.50);
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;

        &:hover {
          cursor: pointer;
          background: rgba(0, 255, 222, 0.5);
          border-radius: 4px;
        }
      }

      .duty-item-active {
        background: rgba(0, 255, 222, 0.5);
        border-radius: 4px;
      }
    }

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar
    {
      width: 10px;
      height: 10px;
      background-color: transparent;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track
    {
      -webkit-box-shadow: inset 0 0 6px transparent;
      //  border-radius: 10px;
      background-color: transparent;
    }

    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb
    {
      // border-radius: 10px;
      border-radius: 0;
      -webkit-box-shadow: inset 0 0 6px $form-border-color;
      background-color: $form-border-color;
    }
  }

  .ant-menu.ant-menu-inline.ant-menu-light.ant-menu-root {
    width: 100% !important;
    background-color: transparent;
  }

  .ant-menu-submenu > .ant-menu {
    background-color: transparent;
  }

  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    background: rgba(0, 255, 222, 0.5);
    border-radius: 4px;
  }

  .ant-menu-inline .ant-menu-item,
  .ant-menu-inline .ant-menu-submenu-title {
    height:50px;
    line-height: 50px;
    font-family: $regular-font-family;
    font-size: 22px;
    color: #FFFFFF;
    text-shadow: 0 0 4px rgba(255,255,255,0.50);
    letter-spacing: 0;
  }
  .ant-menu-item {
    font-family: $regular-font-family;
    font-size: 22px;
    color: #FFFFFF;
    text-shadow: 0 0 4px rgba(255,255,255,0.50);
  }

  .ant-menu-submenu-title:hover {
    background-color: transparent;
  }

  .ant-menu-submenu-inline > .ant-menu-submenu-title:after {
    content: '';
  }

  .ant-menu-inline, .ant-menu-vertical {
    border-right-color: transparent;
  }

  .ant-menu-inline .ant-menu-item:after, .ant-menu-vertical .ant-menu-item:after {
    border-right-color: transparent;
  }
  .ant-menu.ant-menu-inline .ant-menu-sub {

    .ant-menu-item {
     // padding-left: 60px!important;
    }
  }

  .menu-icon {
    // padding-top: 20px;
    position: relative;
    top: 10px;
    left: -10px;
    width: 34px;
    height: 34px;
  }


  .loading {
    text-align: center;
    font-family: $regular-font-family;
    font-size: 18px;
    color: #FFFFFF;
    text-shadow: 0 0 4px rgba(255,255,255,0.50);
    padding: 10px;
    cursor: pointer;
  }

  .ant-menu-item-disabled.ant-menu-item.submenu {
    cursor: not-allowed !important;
  }
  .ant-menu-item-disabled, .ant-menu-submenu-disabled {
    color: #FFFFFF !important;
  }

  .video-state {
    vertical-align: text-bottom;
  }

}
